body { background:#0a0a0a; }
.fl { float:left; } .fr { float:right; } .clear { clear:both; }
#deck { width:320px; height:240px; position:absolute; top:50%; left:50%; margin:-120px 0 0 -160px; }
#portal { width:320px; height:240px; background:black; position:absolute; overflow:hidden; 
	-moz-box-shadow:0 1px 15px rgba(255,255,255,0.2); -webkit-box-shadow:0 1px 15px rgba(255,255,255,0.2); 
	box-shadow:0 1px 15px rgba(255,255,255,0.2); }
#view { width:320px; height:240px; position:absolute; overflow:hidden; }
#background-plate { position:absolute; }
#background { position:absolute; }
#background0 { position:absolute; }
#health-hud { position:absolute; top:-11px; left:0px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; 
	width:30px; background:#555; }
#health-hud img { margin-right:2px; }
#health-hud .bar { height:6px; background:#b00; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#xp-hud { position:absolute; top:-18px; left:0px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; 
	width:100px; background:#555; }
#xp-hud .bar { height:6px; background:#daba00; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; 
	width:0px; }
.obj { width:16px; height:16px; position:absolute; margin:-8px 0 0 -8px; }
.obj.hflip { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: fliph; /*IE*/ }
.obj.vflip { -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: flipv; /*IE*/ }
.obj.projectile { width:9px; height:9px; margin:-5px 0 0 -4px; }
.obj.player, .obj.enemy { width:24px; height:24px; margin:-12px 0 0 -12px; }
.debug-wall { position:absolute; background:blue; display:none; opacity:0.8; width:8px; height:8px; overflow:hidden;
	font-size:8pt; text-align;center; line-height:8px; font-family:Courier New,Courier,fixed-width; }
.debug-wall.selected { background:green; }
.show-debug-walls .debug-wall { display:block; }
.scenery { width:auto; height:auto; margin:0; }
#mapdata { position:absolute; width:640px; height:480px; margin:-240px 0 0 -320px; top:50%; left:50%; font-size:7pt; white-space:nowrap; overflow:auto; }
#enemy-palette { position:absolute; left:335px; top:0px; width:48px; }
#enemy-palette img { position:static; margin:0; cursor:pointer; }
#mute-button { position:absolute; top:-12px; right:0px; cursor:pointer; }
.cuprum, #intro, .button, h3, .text, label, .caption, #status, .hint, #debug-pos, #ingame-text, .alert {
  font-family: 'Cuprum', arial, helvetica, sans-serif;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.2;
}
#ingame-text { background:rgba(255,255,255,0.9); position:absolute; top:0; left:0; width:290px; text-align:center;
	padding:15px; font-size:12pt;
	-moz-box-shadow:0 0 8px 8px rgba(255,255,255,0.9);
	-webkit-box-shadow:0 0 8px 8px rgba(255,255,255,0.9);
	box-shadow:0 0 8px 8px rgba(255,255,255,0.9); }
#status { position:absolute; bottom:-28px; right:0; font-size:10pt; color:white; }
.text { position:absolute; color:black; font-size:10pt; }
#minimap { position:absolute; top:0; left:0; width:320px; height:240px; z-index:7000; background:#111; line-height:0;
	-moz-box-shadow:0 1px 15px rgba(255,255,255,0.2); }
#minimap img { width:10%; height:10%; }
.hint { position:absolute; bottom:-28px; width:320px; text-align:center; margin:0; font-size:10pt; color:white; }
#minimap .hint { width:640px; }
#menu-new { padding-top:30px; }
#menu-load { padding-top:60px; }
#menu-signin { padding-top:20px; }
#menu-signup { padding-top:12px; }
#menu-options { padding-top:90px; }
#btn-options-back { margin-top:42px; }
.menu { position:absolute; left:0; top:0; width:320px; height:180px; z-index:5000; }
.button, .yesno-toggle { 
	-webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; }
.button, input.text { 
	-webkit-border-radius:5px; border-radius:5px;
	-moz-border-radius:5px; display:block; border:1px solid black; background:#809aad; position:relative; height:40px; 
	line-height:40px; padding:0 15px 0 55px; margin:15px 25px; color:white; text-shadow:1px 2px 0 black; font-size:12pt; 
	cursor:pointer; -moz-box-shadow:0 3px 0 rgba(255, 255, 255, 0.1) inset; border:1px solid #222222;
	-webkit-box-shadow:0 3px 0 rgba(255, 255, 255, 0.1) inset; box-shadow:0 3px 0 rgba(255, 255, 255, 0.1) inset; }
.button span { background-color:#777; display:block; position:absolute; top:0; left:0; width:40px; height:35px; 
	-moz-border-radius:4px 0 0 4px; -webkit-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; 
	padding-top:5px; -moz-box-shadow:0 3px 0 rgba(255, 255, 255, 0.1) inset;
	-webkit-box-shadow:0 3px 0 rgba(255, 255, 255, 0.1) inset; box-shadow:0 3px 0 rgba(255, 255, 255, 0.1) inset;
	background-repeat:no-repeat; background-position:center center; text-align:center; }
.button.cancel { background:#cd4444; }
.button:hover { background:#9bb; }
.button:hover span { background-color:#888; }
.button.cancel:hover { background:#de5555; }
.button:active { line-height:44px; }
.button span { background-image:url(image/menuitem.gif); }
.button.disabled { color:#999; }
.button.disabled:active { line-height:40px; }
.button.unobtrusive { opacity:0.6; background:#aaa; }
.button.nolabel { padding:0; width:40px; background:transparent!important; }
.button.nolabel span { border-radius:4px; }
.button.back span { background-image:url(image/menuitem-back.gif); }
.alert { color:white; text-shadow:1px 2px 0 black; margin:50px 35px 5px; position:relative; font-size:14pt; }
.caption { color:white; text-shadow:1px 2px 0 black; margin:15px 25px; position:relative; font-size:12pt; }
#menu-alert, #menu-confirm, #menu-wait { z-index:6000; }
#btn-alert-ok { margin-left:110px; }
#btn-confirm-yes { margin-left:40px; }
#btn-confirm-no { margin-left:15px; }
#btn-wait-cancel { margin-left:100px; }
.button.fr { margin-left:10px; }
.button.fl { margin-right:10px; }
.menu form { margin:0; padding:0; z-index:50001; position:relative; }
label { display:block; height:42px; line-height:38px; color:#eee; margin:8px 25px 0; font-size:12pt; }
label.multiline { line-height:18px; }
input.text { background:#fafafa; cursor:text; text-shadow:none; color:black; width:244px;
	height:30px; padding:3px 12px; line-height:30px; }
label input.text { float:right; width:161px; margin:0; }
.yesno { line-height:20px; height:26px; }
.yesno-toggle { float:right; background:#888; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; 
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.5); -webkit-box-shadow:0 0 10px rgba(0,0,0,0.5); box-shadow:0 0 10px rgba(0,0,0,0.5); 
	padding:3px 5px; cursor:pointer; width:25px; text-align:center; height:20px; }
.yesno-toggle:active { line-height:22px; }
.yesno-toggle.yes { background:#8a8; }
.yesno-toggle.no { background:#cd4444; }
.bg { position:absolute; top:0; left:0; width:320px; height:240px; background:black; opacity:0.6; }
#menu-alert .bg, #menu-confirm .bg, #menu-wait .bg { opacity:0.9; }
.checkpoint { width:32px; height:32px; margin:-20px 0 0 -16px; }
.textpoint { width:16px; height:16px; margin:-8px 0 0 -8px; }
.item-pickup { }
.item-health { width:9px; height:10px; margin:-5px 0 0 -5px; }
.item-weapon { width:9px; height:9px; margin:-5px 0 0 -5px; }
h3 { text-shadow:1px 1px 0 #555; }
#debug-pos { position:absolute; left:0; bottom:-20px; font-size:8pt; color:#999; font-weight:normal; }
#dpad { position:absolute; left:10px; bottom:-118px; width:100px; height:100px; background:url(image/dpad.gif) no-repeat 4px 4px; }
#btn-run { position:absolute; left:190px; bottom:-95px; }
#btn-attack { position:absolute; left:245px; bottom:-95px; }
@media screen and (orientation:portrait) 
{
	body.mobile #deck { margin:-140px 0 0 -160px; }
}
@media screen and (orientation:landscape) 
{
	#screen { position:absolute; width:480px; height:320px; top:50%; left:50%; margin:-160px 0 0 -240px; }
	#deck { margin:-120px 0 0 -150px; }
	#dpad { left:-90px; bottom:70px; background:url(image/dpad-small.gif) no-repeat 20px 20px; }
	#btn-run { left:330px; bottom:125px; }
	#btn-attack { left:330px; bottom:70px; }
}
* { -webkit-touch-callout:none; -webkit-user-select:none; }
.menu input { -webkit-user-select:auto; }